<template>
	<view class="trendBox">
		<!-- 单个grid盒子 -->
		 <view class="gridBox" v-for="(newFeeds,index) in newFeeds" :key="index">
		  	<!-- grid盒子的单个格子 -->
			<!-- 实现每组的第一项的class不同 -->
			<view 
				class="gridBoxItem" 
				:class="idx % 6 == 0 ? ( index % 2 == 0 ? 'gridBoxLeft' :'gridBoxRight' ) : '' " 
				v-for="(item, idx) in newFeeds" :key="idx"
			>
				<image class="gridBoxItem-pic" :src="item.image" lazy-load @click="goTrend(item.id)"></image>
			</view>
		 </view>
		 <share></share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 存储动态列表的所有数据
				feedsList: [],
				// 以6个为一组的数据
				newFeeds: []
			};
		},
		onLoad() {
			this.getFeedsList()
		},
		methods:{
			// 下拉刷新
			onPullDownRefresh () {
			    // 实现重新请求数据,所以feedsList,newFeeds的数组要清空
				this.feedsList = []
				this.newFeeds = []
				this.getFeedsList()
				uni.stopPullDownRefresh()
			},
			//页面滚动到底部事件
			onReachBottom () {
				this.getFeedsList()
			},
			// 请求feedsList数据
			async getFeedsList(){
				// 内容加载提示框
				uni.showLoading({
				    title: '加载中'
				})
				let { data } = await this.$u.api.getfeed()
				let feedsList = data.feeds.map(item => {
					return {
						id:item.id,
						image: item.images[0] ? this.BaseFileURL + item.images[0].file : '/static/images/logo.png'
					}
				})
				uni.hideLoading();
				if (feedsList.length>5){
					this.feedsList = [...this.feedsList, ...feedsList]
					// 新建一个新的数组以用来存储以6个数据为一组的数据
					let newFeeds = []
					for(let i=0; i<this.feedsList.length; i++){
						// 满足i对6取余且i+5有值,保证了前6个数据是存在的.才能将数据push到newFeeds
						if( i % 6 === 0 && this.feedsList[i+5] ) {
							// 截取feedsList【0,6】的数据
							newFeeds.push(this.feedsList.slice(i,i+6))
							this.newFeeds = newFeeds
							console.log(this.newFeeds)
						}
					}
					
					
				}else{
					uni.showToast({
						title: "到底啦！",
						icon: "success",
						duration: 1000,
					});
				}
				
			},
			// 跳转到trend的详情页
			goTrend (id) {
				uni.navigateTo({
					url:`/subPages/trendDetail/trendDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.trendBox{
	background-color: #fff;
	.gridBox{
		width: 704upx;
		// height: 704upx;
		margin: 4upx 22upx 0;
		display: grid;
		// 在grid内部每列所占的大小
		grid-template-columns: 232upx 232upx 232upx;
		grid-template-rows: 232upx 232upx 232upx;
		// 每列和每行之间的间隔
		grid-gap: 4upx;
		background-color: #DADADA;
		// 单个格子
		.gridBoxItem{
			// 格子内图片的大小
			.gridBoxItem-pic{
				width: 100%;
				height: 100%;
				border: 1px solid #fff;
				border-radius: 10upx;
			}
			// 在满足gridBoxItem类名的情况下,再增加一个gridBoxLeft类名
			&.gridBoxLeft{
				grid-row-start: 1;
				grid-row-end: 3;
				grid-column-start: 1;
				grid-column-end: 3;
				.gridBoxItem-pic{
				width: 100%;
				height: 100%;
				border: 1px solid #EEEEE;
				border-radius: 10upx;
				}
			}
			&.gridBoxRight{
				grid-row-start: 2;
				grid-row-end: 4;
				grid-column-start: 2;
				grid-column-end: 4;
				.gridBoxItem-pic{
				width: 100%;
				height: 100%;
				border: 1px solid #EEEEE;
				border-radius: 10upx;
				}
			}
		}
	}
}
</style>
